<template>
  <view class="picker-style">
    <picker
      mode="selector"
      :value="index"
      :range="dataList"
      :range-key="lable"
      @change="setChange($event)"
    >
      <view :class="index === -1 ? 'picker-text' : 'picker-text-state'">
        {{ index === -1 ? "请选择" : dataList[this.index][this.lable] }}
        <image
          class="icon"
          src="../pages/static/image/picker-icon.png"
          mode=""
        />
      </view>
    </picker>
  </view>
</template>

<script>
export default {
  props: {
    dataList: {
      // 数据组
      type: Array,
      default: [],
    },
    lable: {
      // dataList为Array＜Object＞对象时的lable
      type: String,
      default: null,
    },
    value: {
      // dataList为Array＜Object＞对象时的value
      type: String,
      default: null,
    },
  },
  data() {
    return {
      index: -1,
    };
  },
  created() {},
  methods: {
    setChange(e) {
      const arr = this.dataList;
      this.index = e.detail.value;
      this.$emit(
        "change",
        this.key
          ? {
              lable: arr[this.index][this.lable],
              key: arr[this.index][this.key],
            }
          : arr[this.index]
      );
    },
  },
};
</script>

<style lang="scss">
.picker-text {
  display: flex;
  align-items: center;
  color: #222222;
  font-weight: 800;
  font-family: PingFang SC-Heavy, PingFang SC;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 10rpx;
}

.picker-text-state {
  color: black;
  display: flex;
  align-items: center;
  color: #222222;
  font-weight: 800;
  font-family: PingFang SC-Heavy, PingFang SC;
}
</style>
